import { BlockChainList } from '@/services/BlockChain';
import { FileSearchOutlined, PlusOutlined } from '@ant-design/icons';
import type { ProColumns } from '@ant-design/pro-components';
import { ProTable } from '@ant-design/pro-components';
import { Button, message } from 'antd';
import { useEffect, useState } from 'react';
import BlockChainModel from '../Components/BlockChainModal';
type BlockChain = {
  id: number;
  height: number;
  BlockHash: string;
  DataHash: string;
  UpperchainTime: Date;
  UpperchainBatch: string;
};

export default function Table() {
  const [messageApi, contextHolder] = message.useMessage();
  const [showMessage, setShowMessage] = useState(false);
  const [modalVisible, setModalVisible] = useState(false);

  useEffect(() => {
    if (showMessage) {
      messageApi.open({
        type: 'success',
        content: '对比成功',
      });
      setShowMessage(false);
    }
  }, [showMessage]);

  const handleModalVisible = (modelProps: boolean) => {
    setModalVisible(modelProps);
  };
  const columns: ProColumns<BlockChain>[] = [
    {
      dataIndex: 'index',
      valueType: 'indexBorder',
      width: 48,
    },
    {
      title: '区块高度',
      dataIndex: 'height',
      ellipsis: true,
    },
    {
      title: '区块Hash',
      dataIndex: 'BlockHash',
      ellipsis: true,
      copyable: true,
    },
    {
      title: '数据Hash',
      dataIndex: 'DataHash',
      ellipsis: true,
      copyable: true,
    },
    {
      title: '上链时间',
      dataIndex: 'UpperchainTime',
      ellipsis: true,
    },
    {
      title: '上链批次',
      dataIndex: 'UpperchainBatch',
      ellipsis: true,
      copyable: true,
    },
    {
      title: '溯源详情',
      valueType: 'option',
      key: 'option',
      render: () => {
        return (
          <>
            <a
              key="editable"
              onClick={() => {
                handleModalVisible(true);
              }}
            >
              {' '}
              查看详情
            </a>
          </>
        );
      },
    },
    {
      title: '验证区块信息',
      valueType: 'option',
      key: 'option',
      render: () => [
        <a
          key="editable"
          onClick={() => {
            setShowMessage(true);
          }}
        >
          <FileSearchOutlined />
          对比
        </a>,
      ],
    },
  ];
  return (
    <>
      {contextHolder}
      <ProTable<BlockChain>
        request={async () => {
          const { data, success } = await BlockChainList();
          return {
            data,
            success,
          };
        }}
        columns={columns}
        rowKey="id"
        headerTitle="区块链管理"
        toolBarRender={() => {
          return [
            <Button
              key="button"
              icon={<PlusOutlined />}
              type="primary"
              onClick={() => {}}
            >
              新建
            </Button>,
          ];
        }}
      ></ProTable>
      <BlockChainModel
        visible={modalVisible}
        onVisibleChange={handleModalVisible}
      ></BlockChainModel>
    </>
  );
}
